<template>
	<div class="max situation_main">
		<my-header :backBtn="true">
			<div slot="title">学校简介</div>
		</my-header>
		<div class="cont-nof">
			<div class="shl-basic-info tl">
				<div class="shl-name flex">
					<img :src="school.logo" class="shl-logo" alt="">
					{{school.kindergartenName}}
				</div>
				<div class="shl-tel-address">
					<div class="shl-tel flex">
						<img src="../../../../../static/img/phone.png" alt="">
						联系电话：
						<template v-if="!isEdit">
							{{school.phone}}
						</template>
						<template v-else>
							<input class="weui-input" v-model="school.phone" type="text" placeholder="请输入联系电话" style="width: calc(100% - 9rem)" />
						</template>
					</div>
					<div class="shl-address flex">
						<img src="../../../../../static/img/lxdz.png" alt="">
						联系地址：
						<template v-if="!isEdit">
							{{school.address}}
						</template>
						<template v-else>
							<input class="weui-input" v-model="school.address" type="text" placeholder="请输入地址" style="width: calc(100% - 9rem)" />
						</template>
					</div>
				</div>
			</div>
			<div class="shl-img">
				<div class="shl-info">
					<div class="shl-title">校园简介</div>
					<template v-if="!isEdit">
						<div class="shl-info-cont" v-html="school.brief?school.brief:'暂无内容'"></div>
						<my-swiper :list="school.imageList"></my-swiper>
					</template>
					<template v-else>
						<contenteditable placeholder="请输入学校简介" :value="school.brief" @input="getBrief" :border="true"></contenteditable>
						<upload-file ref="upload_brief" :list="school.imageList"></upload-file>
					</template>
				</div>
				<div class="shl-scene">
					<div class="shl-title" style="background-color: rgba(255, 87, 34, 1);">校园风采</div>
					<template v-if="!isEdit">
						<div class="shl-info-cont" v-html="school.kindergartenPhotoDesc?school.kindergartenPhotoDesc:'暂无内容'"></div>
						<my-swiper :list="school.kindergartenPhotoList" :options="swiperOption" :height="100"></my-swiper>
					</template>
					<template v-else>
						<contenteditable placeholder="请输入文字" :value="school.kindergartenPhotoDesc" @input="getKindergartenPhotoDesc"
						 :border="true"></contenteditable>
						<upload-file ref="upload_scene" :list="school.kindergartenPhotoList"></upload-file>
					</template>
				</div>
				<div class="shl-scene">
					<div class="shl-title" style="background-color: rgba(119, 196, 110, 1);">师资力量</div>
					<template v-if="!isEdit">
						<div class="shl-info-cont" v-html="school.teacherPhotoDesc?school.teacherPhotoDesc:'暂无内容'"></div>
						<my-swiper :list="school.teacherPhotoList" :options="swiperOption" :height="100"></my-swiper>
					</template>
					<template v-else>
						<contenteditable placeholder="请输入文字" :value="school.teacherPhotoDesc" @input="getTeacherPhotoDesc" :border="true"></contenteditable>
						<upload-file ref="upload_teacher" :list="school.teacherPhotoList"></upload-file>
					</template>
				</div>
				<div class="shl-scene">
					<div class="shl-title" style="background-color: rgba(255, 179, 0, 1);">学校荣誉</div>
					<template v-if="!isEdit">
						<div class="shl-info-cont" v-html="school.kindergartenHonorDesc?school.kindergartenHonorDesc:'暂无内容'"></div>
						<my-swiper :list="school.kindergartenHonorList" :options="swiperOption" :height="100"></my-swiper>
					</template>
					<template v-else>
						<contenteditable placeholder="请输入文字" :value="school.kindergartenHonorDesc" @input="getKindergartenHonorDesc"
						 :border="true"></contenteditable>
						<upload-file ref="upload_honor" :list="school.kindergartenHonorList"></upload-file>
					</template>
				</div>
			</div>
			<div class="flex shl-btns">
				<div class="shl-btn btn-edit" v-if="access!=='kinsfolk'&&!isEdit" @click="isEdit = true">编辑</div>
				<div class="shl-btn btn-forward" v-if="isEdit&&!isSaving" @click="submit">保存</div>
				<div class="shl-btn btn-forward" v-if="isEdit&&isSaving">保存中...</div>
				<div class="shl-btn btn-forward" v-if="!isEdit" @click="shareFn">分享</div>
			</div>
		</div>
		<div class="weui-mask share" v-if="share" @click="share=false">
			<div class="share_txt">
				点击右上角分享
			</div>
		</div>
	</div>
</template>

<script>
	import mySwiper from './my-swiper.vue';
	import contenteditable from '@/components/contenteditable.vue';
	import uploadFile from '@/components/uploadFile.vue';
	import wx from "weixin-js-sdk";

	export default {
		components: {
			mySwiper,
			contenteditable,
			uploadFile
		},
		data() {
			return {
				share: false,
				access: '',
				isEdit: false,
				isSaving: false,
				school: {
					imageList: [],
					kindergartenPhotoList: [],
					teacherPhotoList: [],
					kindergartenHonorList: [],
					createTime: "",
					id: 0,
					brief: '',
					teacherPhotoDesc: '',
					kindergartenPhotoDesc: '',
					kindergartenHonorDesc: '',
					kindergartenName: "",
					phone: '',
					address: ''
				},
				schooldInfo: '',
				swiperOption: {
					slidesPerView: 3,
					spaceBetween: 5,
				},
			}
		},
		methods: {
			submit() {
				let imgLis_brief = this.$refs.upload_brief.getUpList();
				let imgLis_scene = this.$refs.upload_scene.getUpList();
				let imgLis_teacher = this.$refs.upload_teacher.getUpList();
				let imgLis_honor = this.$refs.upload_honor.getUpList();

				if (this.school.phone.length > 11) {
					this.$weui.topTips('输入的联系电话有误');
					return false
				}
				if (!this.isSaving) {
					this.isSaving = true;
					let data = {
						id: this.school.id,
						brief: this.school.brief, //校园简介
						address: this.school.address,
						phone: this.school.phone,
						teacherPhotoDesc: this.school.teacherPhotoDesc, //师资力量
						kindergartenPhotoDesc: this.school.kindergartenPhotoDesc, //校园风采
						kindergartenHonorDesc: this.school.kindergartenHonorDesc, //学校荣誉
						kindergartenName: this.school.kindergartenName,
						images: imgLis_brief.map(item => item.fileName).join(","),
						kindergartenPhotos: imgLis_scene.map(item => item.fileName).join(","),
						teacherPhotos: imgLis_teacher.map(item => item.fileName).join(","),
						kindergartenHonors: imgLis_honor.map(item => item.fileName).join(","),
					}
					//提交数据
					this.$http.updateKindergarten(data).then(resp => {
						this.$weui.toast('保存成功');
						this.isSaving = false;
						this.isEdit = false;
						this.fetchKindergarten();
					})
				}
			},
			getBrief(value) { //学校简介
				this.school.brief = value;
			},
			getKindergartenPhotoDesc(value) { //学校风采
				this.school.kindergartenPhotoDesc = value;
			},
			getKindergartenHonorDesc(value) { //学校荣誉
				this.school.kindergartenHonorDesc = value;
			},
			getTeacherPhotoDesc(value) { //师资力量
				this.school.teacherPhotoDesc = value;
			},
			fetchKindergarten() {
				this.$http.fetchKindergartenInfo().then(resp => {
					this.school = resp.data;
				})
			},
			getWxConfig() {
				let url = window.location.href;
				let _this = this;
				_this.$http.fetchWxConfig({
					url: url
				}).then(resp => {
					wx.config({
						// debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['updateTimelineShareData'] // 必填，需要使用的JS接口列表
					});
				})
			},
			shareFn() {
        this.share = true;
        let _this=this;
        wx.ready(function() { //需在用户可能点击分享按钮前就先调用
          wx.updateTimelineShareData({
            title: _this.school.kindergartenName+"幼儿园简介", // 分享标题
            link: "http://"+window.location.host+"/wechat/share-school?schoolId="+_this.school.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: _this.school.logo,
            success: function() {
              // 设置成功
            }
          })
        });
			}
		},
		mounted() {
			this.fetchKindergarten();
			this.getWxConfig();
			this.access = this.$Cookies.get('loginType');
		},
	}
</script>

<style scoped>
	.situation_main {
		background: url(http://wy-file.wekids.group/info-bg.png)no-repeat center/cover
	}

	.shl-basic-info,
	.shl-img {
		width: calc(100% - 20px);
		margin: 15px auto 0 auto;
		display: inline-block;
		background: #FFFFFF;
		border-radius: 4px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.shl-img {
		padding-bottom: 20px;
	}

	.shl-logo,
	.shl-tel-address img {
		width: 3rem;
		height: 3rem;
		border-radius: 50px;
		margin-right: 10px;
	}

	.shl-tel-address img {
		width: 1.5rem;
		height: 1.5rem;
	}

	.shl-name {
		align-items: center;
		width: 100%;
		height: 5.5rem;
		font-size: 1.6rem;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		margin-bottom: 10px;
	}

	.shl-name img {
		background: #eeeeee;
	}

	.shl-tel-address {
		width: 100%;
		font-size: 1.2rem;
	}

	.shl-tel,
	.shl-address {
		align-items: flex-start;
		padding-bottom: 10px;
		width: 100%;
	}

	.shl-title {
		width: 11.8rem;
		height: 3rem;
		line-height: 3rem;
		border-radius: 25px;
		background-color: #36C12D;
		border: 1px solid rgba(255, 255, 255, 0);
		color: #FFFFFF;
		font-size: 1.4rem;
		margin: 15px auto;
	}

	.shl-info-cont {
		width: 100%;
		font-size: 1.4rem;
		line-height: 2rem;
		text-align: justify;
	}

	.shl-btns {
		justify-content: space-around;
		margin-bottom: 20px;
		margin-top: 25px;
	}

	.shl-btn {
		width: 140px;
		height: 3.5rem;
		line-height: 3.5rem;
		border-radius: 60px;
		background-color: rgba(244, 248, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 2rem;
		text-align: center;
		border: 1px solid rgba(255, 255, 255, 0);
		box-sizing: border-box;
	}

	.btn-forward {
		color: #ffffff;
		background-color: #36C12D;
	}

	.info-textarea {
		height: 200px;
		border: 1px solid rgba(238, 238, 238, 1);
		box-sizing: border-box;
	}
</style>
